<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 将通过react创建出来的dom对象插入到这个节点中 -->
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>

    <script>
      // 返回值：虚拟节点（vnode）
      // 第一个参数：节点标签名
      // 第二个参数：节点属性。如：{id: 'box'}，若无属性使用null占位
      // 第三个参数：节点的内容，或者是其他vnode。若多个节点内容用数组表示[vnode1,vnode2，...]
      const h1Vnode = React.createElement('h1', null, 'Hello h1')
      const h2Vnode = React.createElement('h2', null, 'Hello h2')
      const divVnode = React.createElement(
        'div',
        { a: 1, className: 'active', htmlFor: 'username' },
        [h1Vnode, h2Vnode]
      )

      // 将虚拟节点插入到dom树中
      ReactDOM.createRoot(document.getElementById('app')).render(divVnode)
    </script>
  </body>
</html>
